<template>

  <el-card style="margin-top: 10px">

    <el-table
      :data="tableData"
      max-height="650px"
      height="650px"
      >

      <el-table-column prop="name" label="名称"/>
      <el-table-column prop="typeName" label="类型" >
        <template slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.typeName === '应用'">{{scope.row.typeName}}</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.typeName === '组件'">{{scope.row.typeName}}</el-tag>
          <el-tag type="warning" size="mini" v-else-if="scope.row.typeName === '工具'">{{scope.row.typeName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="ports" label="占用端口" />


    </el-table>


  </el-card>

</template>

<script>


import http from '@/utils/http'

export default {
  name: "PortList",
  props:{
    // 服务器id
    computerServerId:{
      type: String,
      required: false
    }
  },
  data(){
    return {
      // 表格数据
      tableData: [],
    }
  },
  methods:{
    /**
     * 找到占用的端口（不分页）
     */
    getPort(){
      if (!this.computerServerId){
        return
      }
      http.post("/computer/getPort", {
        computerServerId: this.computerServerId
      }).then(response => {
        let res = response.data;
        // 表格数据
        this.tableData = res.data;

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
  },
  // 进入马上执行
  mounted() {
    this.getPort()
  },
  watch:{
    // 计算机发生变化，这里进行刷新
    computerServerId(val){
      this.getPort()
    },
  },
}
</script>



<style scoped>

</style>
